<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
</head>

<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;
    }
</style>

<body>
<div id="app">
    <div id="searchmsg">
        <template>
            <el-row class="demo-autocomplete">
                <el-col :span="6">
                    订单编号：
                    <el-input v-model="rm.num" clearable placeholder="请输入" size="small" style="width: 180px"></el-input>
                </el-col>
                <el-col :span="6">
                    借款客户：
                    <el-input v-model="rm.name" clearable placeholder="请输入" size="small"  style="width: 180px"></el-input>
                </el-col>
                <el-col :span="6">
                    还款状态：
                    <el-select v-model="rm.alsoStatus" clearable placeholder="请选择" size="small" style="width: 180px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    还款日期：
                    <el-date-picker
                            v-model="rm.strDate"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd"
                            size="small"
                            style="width: 180px">
                    </el-date-picker>
                </el-col>
            </el-row>
            <br/><br/>
            <el-row>
                <el-col  :span="12"></el-col>
                <el-col  :span="6" style="float: right">
                    <el-button type="primary" icon="el-icon-search" size="small" @click="querySearch()" >查询</el-button>
                    <el-button type="primary" size="small" @click="upload()" ><i class="el-icon-upload el-icon--right"></i>&nbsp;&nbsp;导出</el-button>
                </el-col>
                <div style="clear: both"></div>
            </el-row>
            <br/><br/>
        </template>
    </div>

    <div id="maintable">
        <el-row>
            <!--table 模板  ：data 绑定了数据 tableData-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{'text-align':'center'}"
                        :cell-style="{'text-align':'center'}">
                    <el-table-column
                            prop="num"
                            label="订单号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="借款客户"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="newPrincipal"
                            label="回款本金"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="newInterest"
                            label="回款利息"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="newPI"
                            label="回款罚息"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="payType"
                            label="支付方式"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="strNum"
                            label="还款期数"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="alsoStatus"
                            label="还款状态"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="strDate"
                            label="还款时间"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="ditchAllname"
                            label="资金方"
                            width="120">
                    </el-table-column>
                </el-table>
            </template>
        </el-row>
        <br><br>
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    @prev-click="handlePrevChange"
                    @next-click="handleNextChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount"
                    style="padding-left:250px;" >
            </el-pagination>
        </el-row>

    </div>

</div>
</body>

<script type="text/javascript">




    let demo = new Vue({
        el: "#app",
        data() {
            return {
                // 总数据
                tableData:[],
                // 默认显示第几页
                currentPage:1,
                // 总条数，根据接口获取数据长度(注意：这里不能为空)
                totalCount:1,
                // 默认每页显示的条数（可修改）
                pageSize:10,

                options: [{
                    value: '已放款',
                    label: '已放款'
                }, {
                    value: '已还款',
                    label: '已还款'
                }, {
                    value: '逾期中',
                    label: '逾期中'
                }],


                //数据封装成类
                rm : {
                    num : '',
                    name : '',
                    newPrincipal : '',
                    newInterest : '',
                    newPI : '',
                    payType : '',
                    strNum : '',
                    alsoStatus : '',
                    strDate : '',
                    ditchAllname : '',
                }
            };
        },
        methods: {
            //分页显示的方法和代码
            getData(){
                // 这里使用axios，使用时请提前引入
                axios.get("/cs/rminfo/select",{
                        params:{
                            limit:this.pageSize,
                            pageNum:this.currentPage,
                            offset:(this.currentPage-1)*this.pageSize,
                            num:this.rm.num,
                            name:this.rm.name,
                            alsoStatus:this.rm.alsoStatus,
                            strDate:this.rm.strDate
                        }
                    },{emulateJSON: true},
                    {
                        headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                    }
                ).then(reponse=>{
                    // 将数据赋值给tableData
                    this.tableData=reponse.data.rows

                    // 将数据的长度赋值给totalCount
                    this.totalCount=reponse.data.total
                })
            },
            // 分页
            // 每页显示的条数
            handleSizeChange(val) {
                // 改变每页显示的条数
                this.pageSize=val
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage=1
                this.getData()
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变默认的页数
                this.currentPage=val
                this.getData()
            },
            // 前一页
            handlePrevChange(val){
                // 改变默认的页数
                this. currentPage=val
                this.getData()
            },
            // 后一页
            handleNextChange(val){
                // 改变默认的页数
                this. currentPage=val
                this.getData()
            },

            //查询
            querySearch(){
                this.currentPage=1
                this.getData()
            },

            //导出
            upload(){
            },

            //为鼠标移动上去的js样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';

                } else if (rowIndex % 2 === 2) {
                    return 'warning-row';
                }
                return '';
            },

        },//method方法截止
        created : function () {  //挂载完成，就是页面内容加载完成后

            this.getData()


        }
    });


</script>

</html>